import Taro, { Component } from "@tarojs/taro";
import { View, Text } from "@tarojs/components";
import {
  AtDivider,
  AtGrid,
  AtList,
  AtListItem,
  AtIcon,
  AtAvatar
} from "taro-ui";
import "./index.less";
import { userMenu } from "../../config";
// 引入图片
import rightIcon from "../../assets/images/go.png";
import question from "../../assets/images/question.png";
import message from "../../assets/images/message.png";
import star from "../../assets/images/star.png";
import history from "../../assets/images/history.png";
export default class UserPage extends Component {
  config = {
    navigationStyle: "custom",
    backgroundColor: "#eeeeee"
  };
  constructor(props) {
    super(props);
    this.state = {
      menus: []
    };
  }
  componentWillMount() {}

  componentDidMount() {
    this.initialMenu();
    this.initialUserInfo();
  }

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  initialUserInfo = () => {
    // 授权
    Taro.authorize({
      scope: "scope.userInfo",
      success(res) {
        // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
        console.log("成功");
        // 获取权限成功
      }
    });
  };
  initialMenu = () => {
    this.setState({
      menus: userMenu
    });
  };
  handleOptionDetail = menu => {
    console.log(menu);
    Taro.navigateTo({
      url: "./component" + menu.path + "/index"
    });
  };
  render() {
    const { menus } = this.state;
    console.log(userMenu);
    return (
      <View>
        <View>
          <View
            style={{
              background: "#1980ff",
              height: "200px",
              width: "100%",
              overflowX: "visible",
              position: "absolute",
              zIndex: "2"
            }}
          >
            <View style={{ paddingTop: "15%", paddingLeft: "20px" }}>
              <View style={{ float: "left" }}>
                {" "}
                <AtAvatar circle image="https://jdc.jd.com/img/200"></AtAvatar>
              </View>
              <View style={{ paddingTop: "14px", paddingLeft: "20%" }}>
                {" "}
                <Text style={{ color: "#fff", fontWeight: "600" }}>
                  用户昵称
                </Text>
                <button open-type="getUserInfo" />
              </View>
            </View>
          </View>
        </View>
        <View
          style={{
            height: "200px",
            paddingTop: "",
            width: "100%",
            position: "absolute",
            zIndex: "3"
          }}
        >
          <View
            style={{
              background: "#fff",
              marginTop: "40%",
              height: "40%",
              borderRadius: "20px 20px 0 0"
            }}
          >
            <View
              className="at-row"
              style={{ textAlign: "center", paddingTop: "30px" }}
            >
              <View className="at-col">
                <Image
                  style={{
                    height: "30px",
                    width: "30px",
                    borderRadius: "5px"
                  }}
                  src={question}
                />
                <View>
                  <Text style={{ fontSize: "12px" }}>咨询</Text>
                </View>
              </View>
              <View className="at-col">
                <Image
                  style={{
                    height: "30px",
                    width: "30px",
                    borderRadius: "5px"
                  }}
                  src={message}
                />
                <View>
                  <Text style={{ fontSize: "12px" }}>消息</Text>
                </View>
              </View>
              <View className="at-col">
                <Image
                  style={{
                    height: "30px",
                    width: "30px",
                    borderRadius: "5px"
                  }}
                  src={star}
                />
                <View>
                  <Text style={{ fontSize: "12px" }}>收藏</Text>
                </View>
              </View>
              <View className="at-col">
                <Image
                  style={{
                    height: "30px",
                    width: "30px",
                    borderRadius: "5px"
                  }}
                  src={history}
                />
                <View>
                  <Text style={{ fontSize: "12px" }}>历史</Text>
                </View>
              </View>
            </View>
          </View>
          <View style={{ padding: "0 10px" }}>
            {" "}
            <AtDivider lineColor="#f5f5f5" />
          </View>

          <View>
            {menus.map(menu => {
              return (
                <View
                  key={menu.id}
                  onClick={() => this.handleOptionDetail(menu)}
                >
                  <View
                    className="at-row at-row__justify--between"
                    style={{ paddingLeft: "20px", paddingTop: "25px" }}
                  >
                    <View
                      className="at-col at-col-5"
                      style={{ fontSize: "14px" }}
                    >
                      {menu.title}
                    </View>
                    <View
                      className="at-col at-col-5 at-col__offset-5"
                      style={{ background: "#fff", paddingRight: "20px" }}
                    >
                      <View>
                        {" "}
                        <Image
                          style={{ width: "6px", height: "10px" }}
                          src={rightIcon}
                        ></Image>
                      </View>
                    </View>
                  </View>
                </View>
              );
            })}
          </View>
        </View>
      </View>
    );
  }
}
